<template>
  <div class="container">
    <a-form
      :model="formState"
      class="container-form"
      layout="inline"
      @keyup.enter.native="handleSearch"
      @keyup.esc.native="handleReset"
    >
      <a-form-item label="IP地址">
        <a-input
          v-model:value="formState.ip"
          allowClear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button
            type="primary"
            :loading="searchLoading"
            @click="handleSearch"
          >
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button
            :loading="resetLoading"
            @click="handleReset"
          >
            <template #icon>
              <RedoOutlined />
            </template>
            重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <a-row class="container-operate">
      <a-space>
        <a-button
          type="primary"
          @click="handleAdd"
        >
          <template #icon>
            <PlusOutlined />
          </template>
          新增
        </a-button>
      </a-space>
    </a-row>

    <a-table
      class="container-table"
      bordered
      rowKey="id"
      :scroll="{ x: 'max-content', y: tableScrollY }"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      :pagination="pagination"
      @change="tableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'ip'">
          <a-typography-text copyable>{{ record.ip }}</a-typography-text>
        </template>
        <template v-if="column.key === 'username'">
          <a-typography-text copyable>{{ record.username }}</a-typography-text>
        </template>
        <template v-if="column.key === 'password'">
          <a-typography-text copyable>{{ record.password }}</a-typography-text>
        </template>
        <template v-if="column.key === 'type'">
          <a-tag :color="getSysType(record.type).color">
            {{ getSysType(record.type).text }}
          </a-tag>
        </template>
        <template v-if="column.key === 'networkType'">
          <a-tag :color="getNetworkType(record.networkType).color">
            {{ getNetworkType(record.networkType).text }}
          </a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <a-button
            type="link"
            @click="handleEdit(record)"
          >
            <template #icon>
              <EditOutlined />
            </template>
            编辑
          </a-button>
          <a-divider type="vertical" />
          <a-popconfirm
            placement="left"
            cancel-text="取消"
            ok-text="确认"
            title="确认删除？"
            @confirm="handleDelete(record)"
          >
            <a-button
              danger
              type="link"
            >
              <template #icon>
                <DeleteOutlined />
              </template>
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>

    <serverModal
      ref="modal"
      @modalOk="getList"
    />
  </div>
</template>
<script setup>
import { useFormSearch, useTableList } from '@/hooks/index.js'
import Service from '@/utils/service.js'
import { message } from 'ant-design-vue'
import ServerModal from './src/serverModal.vue'

const sysTypeMap = new Map([
  ['1', { text: 'windows', color: '#3b5999' }],
  ['2', { text: 'linux', color: '#cd201f' }],
])
const getSysType = computed(() => {
  return type => sysTypeMap.get(type)
})

const networkTypeMap = new Map([
  ['1', { text: '内网', color: '#2db7f5' }],
  ['2', { text: '公网', color: '#87d068' }],
])
const getNetworkType = computed(() => {
  return type => networkTypeMap.get(type || '1')
})

const columns = [
  {
    title: '#',
    align: 'center',
    key: 'index',
    customRender: row => row.index + 1,
  },
  {
    title: 'IP地址',
    align: 'center',
    dataIndex: 'ip',
    key: 'ip',
  },
  {
    title: '端口',
    align: 'center',
    dataIndex: 'port',
    key: 'port',
  },
  {
    title: '账号',
    align: 'center',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '密码',
    align: 'center',
    dataIndex: 'password',
    key: 'password',
  },
  {
    title: '系统类型',
    align: 'center',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '网络类型',
    align: 'center',
    dataIndex: 'networkType',
    key: 'networkType',
  },
  {
    title: '备注',
    align: 'center',
    dataIndex: 'remark',
  },
  {
    title: '操作',
    align: 'center',
    key: 'action',
    fixed: 'right',
    width: 180,
  },
]

const { loading, dataSource, pagination, tableScrollY, getList, tableChange } = useTableList('/server/page')
const { formState, searchLoading, resetLoading, handleSearch, handleReset } = useFormSearch({ ip: '' }, getList)
getList()

const modal = ref()

const handleAdd = () => {
  modal.value.handleAdd()
}

const handleEdit = record => {
  modal.value.handleEdit(record)
}

const handleDelete = record => {
  return Service.deleteAction('/server/delete', {
    id: record.id,
  }).then(({ code, msg }) => {
    if (code === 200) {
      getList()
      message.success('删除成功！')
    } else {
      message.error(msg)
    }
  })
}
</script>
<style scoped lang="scss"></style>
